<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .imgs {
            border: 2px solid #333;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:class="{imgs:showCss}" v-bind:src="url" v-bind:title="name" @mouseover="changeUrl" @mouseout="changeUrlOut">
    <p>{{name}}</p>
</div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
new Vue({
    el :"#app",
    data :{
        halisi:'https://x0.ifengimg.com/ucms/2020_33/F7C6B339C39C05117538B43EF67B2F17379A7D08_w1280_h624.png',
        telangpu:'https://n.sinaimg.cn/sinacn20190507ac/12/w1440h972/20190507/38b5-hwsffza5639818.jpg',
        url:'https://n.sinaimg.cn/sinacn20190507ac/12/w1440h972/20190507/38b5-hwsffza5639818.jpg',
        name:'特朗普',
        halisiName:'哈里斯',
        telangpuName:'特朗普',
        imgs: 'imgs',
        showCss : true
    },
    methods : {
        changeUrl(){
            this.url = this.halisi
            this.name = this.halisiName
        },
        changeUrlOut(){
            this.url = this.telangpu
            this.name = this.telangpuName
        }
    }
})
</script>